import React, {Component} from 'react'
import {ScrollView} from 'react-native'
import makeActions from "../stores/action";
import {connect} from "react-redux";
import PopUp from "../component/PopUp";
import Wrap from '../component/Wrap.js'
import SongItem from './SongItem.js'

class UserInfo extends Component {
  constructor(props){
    super(props);
    this.state = {
    };
  }
  render() {
    const {props} =this;
    const {playlist} = props;
    console.log(playlist, playlist && playlist.name)
    return (
      <PopUp show={props.show}>
        <Wrap
          left={{icon: 'angle-left', fn: () => props.conf.hidePop()}}
          right={{icon: 'caret-right', fn: () => playlist && playlist.tracks && props.control.setPlayList(playlist.tracks)}}
          title={playlist && playlist.name}
        >
          <ScrollView style={{flex: 1}}>
            {
              playlist && playlist.tracks.map((song, index) =>
                <SongItem
                  likeList={this.props.likeList}
                  likeSong={this.props.likeSong}
                  key={index}
                  song={song}
                  curSong={props.curSong}
                  playSong={song => props.playSong(song)}
                />
              )
            }
          </ScrollView>
        </Wrap>
      </PopUp>
    )
  }
}

export function PlayListConf(scope, keyPath = 'playListConf') {
  this.scope = scope;
  this.keyPath = keyPath;
  this.show = false;
  this.playlist = undefined;
}
PlayListConf.prototype.showPop = function (conf) {
  Object.keys(conf).forEach(item => this[item] = conf[item])
  this.show = true;
  this.setState()
}
PlayListConf.prototype.hidePop = function () {
  this.show = false;
  this.setState()
}
PlayListConf.prototype.setState = function () {
  const state = {};
  state[this.keyPath] = this;
  this.scope.setState(state)
}

const mapStateToProps = state => ({...state.commonReducer});
const mapDispatchToProps = dispatch => ({...makeActions(dispatch)});
export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);

